<template>
  <div class="cameraManagement">
    <el-row>
      <el-col style="display:flex;align-items: center;margin-bottom:10px;">
        <div class="border"></div>
        <h3>{{cameraManagement.personTitle}}</h3>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <div style="display:flex;align-items: center;margin-left:20px">
          <el-button
            class="addBtn boxShadowButton"
            icon="el-icon-circle-plus"
            style="margin-right:40px"
            @click="add"
          >{{cameraManagement.add}}</el-button>
          <p>{{cameraManagement.search}}</p>
          <el-input
            style="width:260px;margin-right:10px"
            v-model.trim="deviceNo"
            :placeholder="cameraManagement.deviceNo"
            @keyup.enter.native.prevent="check"
          ></el-input>
          <el-button class="searchBtn boxShadowButton" @click="check">{{cameraManagement.check}}</el-button>
        </div>
      </el-col>
      <el-col :span="8" align="right">
        <el-button
          class="prevPage boxShadowButton"
          :disabled="pageNum==firstPage"
          @click="prevePage"
        >{{$t('m.prevPage')}}</el-button>
        <el-button
          class="nextPage boxShadowButton"
          :disabled="pageNum==lastPage"
          @click="nextPage"
        >{{$t('m.nextPage')}}</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      style="width: 100%;margin-top:10px;margin-left:20px"
      :row-style="tableRowStyle"
      :header-cell-style="tableHeaderColor"
    >
      <el-table-column
        prop="deviceNo"
        :label="cameraManagement.sort"
        min-width="120"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="deviceName"
        :label="cameraManagement.name"
        min-width="120"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="buildingName"
        :label="cameraManagement.build"
        min-width="120"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.buildingName=='' || scope.row.buildingName==undefined || scope.row.buildingName==null"
          >--</span>
          <span v-else>{{scope.row.buildingName}}</span>
        </template>
      </el-table-column>
      <!-- 测试说要删掉 -->
      <!-- <el-table-column
        prop="floorNo"
        :label="cameraManagement.floor"
        min-width="120"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.floorNo=='' || scope.row.floorNo==undefined || scope.row.floorNo==null"
          >--</span>
          <span v-else>{{scope.row.floorNo}}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="roomNo"
        :label="cameraManagement.roomNo"
        min-width="120"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.roomNo=='' || scope.row.roomNo==undefined || scope.row.roomNo==null"
          >--</span>
          <span v-else>{{scope.row.roomNo}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="oldmanName"
        :label="cameraManagement.oldman"
        min-width="120"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.oldmanName=='' || scope.row.oldmanName==undefined || scope.row.oldmanName==null"
          >--</span>
          <span v-else>{{scope.row.oldmanName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        :label="cameraManagement.status"
        min-width="120"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.status=='online'"
            style="color:green;cursor: pointer;"
            @click="equipmentstatus(scope.row)"
          >{{cameraManagement.online}}</span>
          <span
            v-else
            style="color:red;cursor: pointer;"
            @click="equipmentstatus(scope.row)"
          >{{cameraManagement.offline}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="cameraManagement.dosth" min-width="260" align="center">
        <template slot-scope="scope">
          <!-- <el-button
            class="fixBtn boxShadowButton"
            @click="fix(scope.row)"
            :size="size"
          >{{cameraManagement.fix}}</el-button>-->
          <el-button
            class="jiebangBtn boxShadowButton"
            @click="jiebang(scope.row)"
            v-if="scope.row.bind"
            :size="size"
          >{{cameraManagement.jiebang}}</el-button>
          <el-button
            class="detailBtn boxShadowButton"
            @click="bangding(scope.row)"
            v-if="!scope.row.bind"
            :size="size"
          >{{cameraManagement.bangding}}</el-button>
          <el-button
            class="deleteBtn boxShadowButton"
            @click="deleteClick(scope.row)"
            :size="size"
          >{{$t('m.delete')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="cameraManagement.bangding"
      :visible.sync="dialogVisible"
      width="30%"
      @close="closeBangding"
      class="deviceDialog"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12" align="center">
            <el-tooltip class="item" effect="dark" :content="backList.deviceNo" placement="bottom">
              <el-form-item
                class="deviceDialog-contentOne"
                :label="cameraManagement.sort"
              >{{backList.deviceNo}}</el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span="12">
            <el-form-item
              class="deviceDialog-contentTwo"
              :label="cameraManagement.build"
              prop="build"
            >
              <el-select v-model="ruleForm.build" @change="changeBuild">
                <el-option
                  v-for="item in buildList"
                  :key="item.value"
                  :label="item.buildingName"
                  :value="item.buildingId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" align="center">
            <el-tooltip
              class="item"
              effect="dark"
              :content="backList.deviceName"
              placement="bottom"
            >
              <el-form-item
                class="deviceDialog-contentOne"
                :label="cameraManagement.name"
              >{{backList.deviceName}}</el-form-item>
            </el-tooltip>
          </el-col>
          <!-- 测试说要这么改 -->
          <!-- <el-col :span="12">
            <el-form-item
              class="deviceDialog-contentTwo"
              :label="cameraManagement.floor"
              prop="floor"
              ref="floor"
            >
              <el-select v-model="ruleForm.floor" @change="changeFloor">
                <el-option
                  v-for="item in floorList"
                  :key="item.floorNo"
                  :label="item.floorNo"
                  :value="item.floorNo"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item
              class="deviceDialog-contentTwo"
              :label="cameraManagement.roomNo"
              prop="room"
              ref="room"
            >
              <el-select v-model="ruleForm.room" @change="changeRoom">
                <el-option
                  v-for="item in roomList"
                  :key="item.value"
                  :label="item.roomNo"
                  :value="item.roomId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" align="center">
            <el-form-item
              class="deviceDialog-contentOne"
              :label="cameraManagement.oldman"
            >{{oldName}}</el-form-item>
          </el-col>
          <!-- 为了页面美化，移动到上面 -->
          <!-- <el-col :span="12">
            <el-form-item
              class="deviceDialog-contentTwo"
              :label="cameraManagement.roomNo"
              prop="room"
              ref="room"
            >
              <el-select v-model="ruleForm.room" @change="changeRoom">
                <el-option
                  v-for="item in roomList"
                  :key="item.value"
                  :label="item.roomNo"
                  :value="item.roomId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button
          class="deleteBtn boxShadowButton"
          @click="bangdingForm('ruleForm')"
          :size="size"
        >{{cameraManagement.yes}}</el-button>
        <el-button
          class="boxShadowButton"
          :size="size"
          @click="dialogVisible = false"
        >{{cameraManagement.no}}</el-button>
      </div>
    </el-dialog>
    <!-- 解绑 -->
    <el-dialog
      :title="cameraManagement.jiebang"
      :visible.sync="jiebangDialogVisible"
      width="30%"
      :center="true"
    >
      <h3 style="text-align: center">{{cameraManagement.jiebangWordSensor}}</h3>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="deleteBtn boxShadowButton"
          @click="jiebangCheck"
          :size="size"
        >{{cameraManagement.yes}}</el-button>
        <el-button
          class="boxShadowButton"
          :size="size"
          @click="jiebangDialogVisible = false"
        >{{cameraManagement.no}}</el-button>
      </span>
    </el-dialog>

    <!-- 删除 -->
    <el-dialog
      :title="cameraManagement.deleteDevice"
      :visible.sync="deletDialogVisible"
      width="30%"
      :center="true"
    >
      <h3 style="text-align: center">{{cameraManagement.sureDelete}}</h3>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="deleteBtn boxShadowButton"
          @click="delet"
          :size="size"
        >{{cameraManagement.yes}}</el-button>
        <el-button
          class="boxShadowButton"
          :size="size"
          @click="deletDialogVisible = false"
        >{{cameraManagement.no}}</el-button>
      </span>
    </el-dialog>

    <!-- 设备离线状态弹窗 by xiang 2020/3/6-->
    <el-dialog
      :title="equipmentStatus.status"
      :visible.sync="statusDialogVisible"
      width="40%"
      :center="true"
      @close="closeStatusDialogVisible"
    >
      <span>
        <el-table
          :data="statusList"
          :row-style="tableRowStyle"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="index" :label="equipmentStatus.sort" width="100" align="center"></el-table-column>
          <el-table-column prop="deviceNo" :label="equipmentStatus.name" align="center"></el-table-column>
          <el-table-column prop="createdTime" :label="equipmentStatus.updataTime" align="center"></el-table-column>
          <el-table-column prop="online" :label="equipmentStatus.online" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.online==1" style="color:green">{{cameraManagement.online}}</span>
              <span v-else style="color:red">{{cameraManagement.offline}}</span>
            </template>
          </el-table-column>
        </el-table>
      </span>
      <span>
        <!-- 分页 -->
        <el-pagination
          background
          layout="total,prev, pager, next,jumper"
          :total="listTotal"
          style="margin-top:20px"
          align="center"
          class="fenye"
          @current-change="listChangePage"
          :current-page="listCurrentPage"
        ></el-pagination>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="statusDialogVisible = false">{{cameraManagement.check}}</el-button>
      </span>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      background
      layout="total,prev, pager, next,jumper"
      :total="total"
      style="margin-top:20px"
      align="center"
      class="fenye"
      :current-page="currentPage"
      @current-change="changePage"
    ></el-pagination>
  </div>
</template>
<script>
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
export default {
  name: "CameraManagement",
  data() {
    return {
      cameraManagement: this.$t("m.cameraManagement"), //引入 lang 里面的字符串资源,
      equipmentStatus: this.$t("m.equipmentStatus"), //引入 lang 里面的字符串资源,
      size: "mini",
      dialogVisible: false,
      jiebangDialogVisible: false, //解绑窗
      deletDialogVisible: false, //删除弹窗
      statusDialogVisible: false, //设备离线列表弹窗 by xiang  2020/3/6
      deviceNo: "",
      oldName: "", //老人姓名
      tableData: [],
      backList: {}, //回显的信息
      ruleForm: {
        build: "",
        floor: "",
        room: ""
      },
      buildList: [],
      buildingId: 0,
      buildingName: "",
      floorList: [],
      floorNo: 0,
      roomList: [],
      roomName: "",
      roomId: 0,
      tableLoading: false, //表格加载的loading
      pageNum: 1,
      pageSize: 10,
      total: 0,
      currentPage: 1,
      firstPage: "", //第一页
      lastPage: "", //最后一页
      acceptLanguage: "ja_JP", //数据请求传参需要传的语言  ja_JP----日文
      statusList: [], //设备离线列表 by xiang 2020/3/6
      listTotal: 0, //设备死活数
      listCurrentPage: 1, //设备死活当前页面
      listPageNum: 1,
      listdeviceNo: ""
    };
  },
  computed: {
    rules() {
      return {
        build: [
          {
            required: true,
            message: this.$t("m.equipmentAdd.null"),
            trigger: "change"
          }
        ],
        floor: [
          {
            required: true,
            message: this.$t("m.equipmentAdd.null"),
            trigger: "change"
          }
        ],
        room: [
          {
            required: true,
            message: this.$t("m.equipmentAdd.null"),
            trigger: "change"
          }
        ]
      };
    }
  },
  methods: {
    add(row) {
      sessionStorage.setItem("deviceType", "personFeel");
      bus.$emit("homePage", {
        type: "jump",
        path: "/equipmentAdd",
        title: this.$t("m.equipmentAdd").add
      });
    },

    //上一页
    prevePage() {
      this.pageNum =
        this.pageNum > this.firstPage ? this.pageNum - 1 : this.firstPage;
      this.queryList();
    },

    //下一页
    nextPage() {
      this.pageNum =
        this.pageNum < this.lastPage ? this.pageNum + 1 : this.lastPage;
      this.queryList();
    },

    //翻页
    changePage(val) {
      this.pageNum = val;
      this.currentPage = val;
      this.queryList();
    },
    //确认搜索
    check() {
      this.pageNum = 1;
      this.queryList();
    },

    //修改按钮
    fix(row) {
      console.log(row);
      let device_Info = {
        deviceName: row.deviceName,
        deviceNo: row.deviceNo,
        id: row.id
      };
      sessionStorage.setItem("deviceType", "personFeel");
      sessionStorage.setItem("deviceEdit", "deviceEdit");
      sessionStorage.setItem("device_Info", JSON.stringify(device_Info));
      bus.$emit("homePage", {
        type: "jump",
        path: "/equipmentAdd",
        title: this.$t("m.equipmentAdd").edit
      });
    },

    //绑定
    bangding(row) {
      console.log(row);
      this.backList = row;
      this.dialogVisible = true;
      this.getBuildList();
    },

    //查询列表
    queryList() {
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        deviceNo: this.deviceNo
      };
      this.tableLoading = true; //loading加载
      //by guo 2020-4-22-17:34修改 需求变更
      //分页查询接口dmc/bodySensor/queryGroupBodySensorListWithPage 变更为 dmc/newBody/queryListWithPage
      this.$postJson(
        "dmc/newBody/queryListWithPage",
        param,
        this.acceptLanguage
      ).then(res => {
        this.tableData = res.result.list;
        this.total = Number(res.result.total);
        this.currentPage = res.result.pageNum;
        this.firstPage = res.result.firstPage; //第一页
        this.lastPage = res.result.lastPage; //最后一页
        setTimeout(() => {
          this.tableLoading = false;
        }, 1000);
      });
    },

    //获取楼栋列表
    getBuildList() {
      this.$postForm("omc/Building/showAll", {}, this.acceptLanguage).then(
        res => {
          this.buildList = res.result;
        }
      );
    },

    //选择楼栋
    changeBuild(val) {
      this.floorList = []; //清空
      this.roomList = [];
      this.ruleForm.floor = "";
      this.ruleForm.room = "";
      this.oldName = "";

      this.buildingId = val;
      let buildList = this.buildList.filter(item => {
        return item.buildingId == val;
      });
      this.buildingName = buildList[0].buildingName;
      //根据楼栋查楼层
      this.$postForm(
        "omc/Building/selectById",
        { buildingId: val },
        this.acceptLanguage
      ).then(res => {
        for (var i = 0; i < res.result.floorNum; i++) {
          this.floorList.push({ floorNo: i + 1 });
        }
      });
      this.changeFloor(1)
    },

    //选择楼层
    changeFloor(val) {
      this.floorNo = val;
      this.getRoom(); //获取房间数据
    },

    //根据楼栋楼层获取房间信息
    getRoom() {
      this.roomList = []; //清空
      this.ruleForm.room = "";
      this.oldName = "";

      let param = {
        buildingId: this.buildingId,
        floorNo: this.floorNo
      };
      this.$postJson("omc/Room/queryRoomInfo", param, this.acceptLanguage).then(
        res => {
          this.roomList = res.result;
        }
      );
    },

    //选择房间
    changeRoom(val) {
      this.roomId = val;
      let roomList = this.roomList.filter(item => {
        return item.roomId == val;
      });
      console.log(roomList);
      this.roomName = roomList[0].roomNo;
      //根据房间id查老人
      this.$postForm(
        "omc/Room/theLifeRoom/" + val,
        {},
        this.acceptLanguage
      ).then(res => {
        this.oldName = res.result[0].oldName;
      });
    },

    //绑定房间号
    bangdingForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          console.log(
            this.buildingName + "-" + this.floorNo + "-" + this.roomName
          );
          let param = {
            deviceId: this.backList.id,
            bindType: 4,
            location:
              this.buildingName + "-" + this.floorNo + "-" + this.roomName,
            roomId: this.roomId
          };
          //by guo 2020-4-22-17:36修改  需求变更   原绑定接口dmc/bodySensor/bindCsunBodySensorLocation 变更为 dmc/newBody/bind
          this.$postJson("dmc/newBody/bind", param, this.acceptLanguage).then(
            res => {
              if (res.code == 200) {
                this.dialogVisible = false;
                this.$message({ message: res.message, type: "success" });
                this.queryList();
              } else {
                this.$message({ message: res.message, type: "error" });
              }
            }
          );
        }
      });
    },

    //解除绑定
    jiebang(row) {
      this.deviceId = row.id;
      this.jiebangDialogVisible = true;
    },

    //确认解绑
    jiebangCheck() {
      //by guo 2020-4-22-17:37 修改  原解绑接口dmc/bodySensor/breakCsunBodySensorLocation 变更为 dmc/newBody/untied/
      this.$postForm(
        "dmc/newBody/untied/" + this.deviceId,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.jiebangDialogVisible = false;
          this.$message({ message: res.message, type: "success" });
          this.queryList();
        } else {
          this.$message({ message: res.message, type: "error" });
        }
      });
    },

    //删除按钮
    deleteClick(row) {
      this.deviceId = row.id;
      if (row.bind == true) {
        this.$message({
          message: this.$t("m.cameraManagement.deletBefore"),
          type: "error"
        });
      } else {
        this.deletDialogVisible = true;
      }
    },

    //确认删除
    delet() {
      //by  guo 2020-4-22-17：39 修改  原删除接口 dmc/bodySensor/deleteById 变更为 dmc/newBody/deleteById
      this.$postJson(
        "dmc/newBody/deleteById/" + this.deviceId,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.deletDialogVisible = false;
          this.queryList();
          this.$message({ message: res.message, type: "success" });
        } else {
          this.$message({ message: res.message, type: "error" });
        }
      });
    },

    //关闭弹窗
    closeBangding() {
      this.$refs.ruleForm.resetFields();
      this.buildList = [];
      this.floorList = [];
      this.roomList = [];
      this.oldName = "";
    },

    /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "background-color: #efefef";
      } else {
        return "background-color: #f9f9f9";
      }
    },

    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    },

    //获取设备是否离线状态 by xiang 2020/3/6
    equipmentstatus(row) {
      this.statusDialogVisible = true;
      this.listdeviceNo = row.id;
      let param = {
        pageNum: this.listPageNum,
        pageSize: this.pageSize,
        deviceId: this.listdeviceNo,
        groupId: sessionStorage.getItem("groupId")
      };
      this.$postJson("dmc/online/queryListWithPage", param).then(res => {
        this.statusList = res.result.list;
        this.listTotal = Number(res.result.total);
      });
    },

    //设备死活翻页 by xiang
    listChangePage(val) {
      this.listCurrentPage = val;
      let param = {
        pageNum: val,
        pageSize: this.pageSize,
        deviceId: this.listdeviceNo,
        groupId: sessionStorage.getItem("groupId")
      };
      this.$postJson("dmc/online/queryListWithPage", param).then(res => {
        this.listTotal = Number(res.result.total);
        this.statusList = res.result.list;
      });
    },

    //关闭设备死活弹窗清空
    closeStatusDialogVisible() {
      this.listPageNum = 1;
      this.listCurrentPage = 1;
    }
  },
  created() {},
  mounted() {
    this.queryList();
    bus.$on("refreshBodyList", () => {
      this.queryList();
    });
  },
  destroyed() {
    bus.$off("refreshBodyList");
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-select input {
  width: 150px;
  border: none !important;
  border-bottom: 2px solid #cccccc !important;
  border-radius: 1px;
}
.prevPage {
  background: #409efe;
  color: #ffffff;
}
.nextPage {
  background: #ffffff;
}
.border {
  width: 10px;
  height: 30px;
  background: black;
  margin-right: 10px;
}
.addBtn {
  color: #7e7e7e;
}
.searchBtn {
  background: #409efe;
  color: #ffffff;
}
.jiebangBtn {
  background: #409eff;
  color: #ffffff;
  border-radius: 5px;
}
.detailBtn {
  width: 128px;
  background: #67c23a;
  color: #ffffff;
  border-radius: 5px;
}
.fixBtn {
  background: #e6a23c;
  color: #ffffff;
  border-radius: 5px;
}
.deleteBtn {
  background: #dddddd;
  color: #010101;
  border-radius: 5px;
}
/deep/ .deviceDialog .el-form-item {
  margin-bottom: 20px !important;
}
/deep/ .deviceDialog .el-form-item__label {
  line-height: 20px !important;
}
/deep/ .deviceDialog-contentOne .el-form-item__content {
  height: 35px !important;
  line-height: 40px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/ .deviceDialog-contentTwo .el-form-item__content {
  height: 35px !important;
  line-height: 30px !important;
}
/deep/ .deviceDialog .el-input__inner {
  height: 20px !important;
  line-height: 20px !important;
}
/deep/ .deviceDialog .el-input__icon {
  height: 120% !important;
}
/deep/ .deviceDialog .el-input {
  width: 150px !important;
}
</style>